<template>
  <div class="one-examine">
    <HeaderRefComponent />
    <searchArea @submit="submit" />
    <el-card class="list-box" v-loading="pageLoading">
      <cus-table :auto-request="false" ref="tableRef" url="/admin/lessonAudit/queryPage">
        <template #default>
          <el-table-column prop="creatorName" label="教师"></el-table-column>
          <el-table-column prop="title" label="课次名称">
            <template #default="scope">
              <span>{{filterHtml(scope.row.title)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lessonName" label="学生/小组课"></el-table-column>
          <el-table-column prop="modifyTime" label="提交日期"></el-table-column>
          <el-table-column label="审核状态">
            <template #default="scope">
              <span
                @click="toDetail(scope.row)"
                class="examine-status examine-pass"
                v-if="scope.row.status === 1"
              >已通过</span>
              <span
                class="examine-status examine-nopass"
                v-if="scope.row.status === 2"
                @click="toDetail(scope.row)"
              >未通过</span>
              <span
                class="examine-status examine-default"
                v-if="scope.row.status === 0"
                @click="toDetail(scope.row)"
              >未审核</span>
            </template>
          </el-table-column>
        </template>
      </cus-table>
    </el-card>
  </div>
</template>

<script lang='ts'>
import HeaderRefComponent from "./components/header-ref.vue";
import searchArea from "./components/search.vue";
import examineDetail from "./examine-detail/index.vue";
import { ref, onMounted } from "vue";
import { screen } from "$";
export default {
  components: { HeaderRefComponent, searchArea },
  setup() {
    onMounted(() => {
      submit({}, "");
    });
    let examineData = ref([{ status: 1 }]);
    let tableRef = ref();
    let pageLoading = ref(false);
    const submit = async (params: any, reset: any) => {
      pageLoading.value = true;
      if (reset === "reset") {
        tableRef.value.page.current = 1;
      }
      await tableRef.value.request(params.value);
      pageLoading.value = false;
    };
    const toDetail = async (examineInfo) => {
      await screen.create(
        examineDetail,
        { examineInfo: examineInfo },
        { zIndex: "3000", hiddenBack: false }
      );
      tableRef.value.request();
    };
    const filterHtml = (data) => {
      let reg = /<[^>]*>/g;
      return data && data.replace(reg, "");
    };
    return {
      submit,
      examineData,
      toDetail,
      tableRef,
      pageLoading,
      filterHtml,
    };
  },
};
</script>

<style scoped lang="scss">
.examine-status {
  cursor: pointer;
}
.examine-pass {
  color: #74c874;
}
.examine-nopass {
  color: #fc514f;
}
</style>
